<template>
	<Dialog :title="dialogTitle" v-model="dialogVisible">
		<el-form ref="formRef" :model="formData" :rules="formRules" width="60%" label-width="130px"
			v-loading="formLoading">
			<el-form-item label="有无核销" prop="isWriteoff">
				<el-radio-group v-model="formData.isWriteoff" class="ml-4">
					<el-radio :label="0" size="large">核销</el-radio>
					<el-radio :label="1" size="large">不核销</el-radio>
				</el-radio-group>
			</el-form-item>
			<el-form-item label="商品名称" prop="name">
				<el-input v-model="formData.name" placeholder="请输入商品名称" />
			</el-form-item>

			<el-form-item label="商品类型" prop="productType">
				<el-select v-model="formData.productType" placeholder="请选择商品类型" class="w100%!">
					<el-option v-for="item in productsList" :key="item.id" :label="item.name" :value="item.id" />
				</el-select>
			</el-form-item>
			<el-form-item label="所属商家" prop="merchantId" v-if="formData.isWriteoff === 0">
				<el-select v-model="formData.merchantId" placeholder="请选择所属商家" class="w100%!"
					@change="handleChangeSelect">
					<el-option v-for="item in merchantList" :key="item.id" :label="item.name" :value="item.id" />
				</el-select>
			</el-form-item>
			<el-form-item label="地址" prop="address">
				<el-input v-model="formData.address" placeholder="请输入地址" disabled />
			</el-form-item>
			<el-form-item label="供货价(元)/人" prop="supplyPrice" v-if="formData.isWriteoff === 0">
				<el-input v-model="formData.supplyPrice" placeholder="请输入供货价(元)/人" />
			</el-form-item>
			<el-form-item label="平台售价(元)/人" prop="platformPrice">
				<el-input v-model="formData.platformPrice" placeholder="请输入平台售价(元)/人" />
			</el-form-item>
			<el-form-item label="商品介绍" prop="productIntroduct">
				<el-input type="textarea" v-model="formData.productIntroduct" placeholder="请输入商品介绍" />
			</el-form-item>
			<el-form-item label="商品封面" prop="cover">
				<UploadImg v-model="formData.cover" :limit="1" :is-show-tip="false" />
			</el-form-item>
		</el-form>
		<template #footer>
			<el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
			<el-button @click="dialogVisible = false">取 消</el-button>
		</template>
	</Dialog>
</template>
<script setup lang="ts">
	import * as ProductsListApi from '@/api/blind/productsList'
	import * as MerchantListApi from '@/api/blind/merchantList'

	const { t } = useI18n() // 国际化
	const message = useMessage() // 消息弹窗

	const dialogVisible = ref(false) // 弹窗的是否展示
	const dialogTitle = ref('') // 弹窗的标题
	const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
	const formType = ref('') // 表单的类型：create - 新增；update - 修改
	const formData = ref({
		name: undefined,
		isWriteoff: 0,
		productType: undefined,
		merchantId: undefined,
		address: undefined,
		supplyPrice: undefined,
		platformPrice: undefined,
		productIntroduct: undefined,
		status: 1,
		cover: undefined,
	})
	const formRules = reactive({
		isWriteoff: [{ required: true, message: '有无核销不能为空', trigger: 'blur' }],
		name: [{ required: true, message: '商品名称不能为空', trigger: 'blur' }],
		productType: [{ required: true, message: '商品类型不能为空', trigger: 'blur' }],
		merchantId: [{ required: true, message: '所属商家不能为空', trigger: 'blur' }],
		supplyPrice: [{ required: true, message: '供货价不能为空', trigger: 'blur' }],
		platformPrice: [{ required: true, message: '平台售价不能为空', trigger: 'blur' }],
		cover: [{ required: true, message: '商品封面不能为空', trigger: 'blur' }]
	})
	const formRef = ref() // 表单 Ref

	// 商品类型列表
	const productsList = ref()
	// 商家列表
	const merchantList = ref()

	onMounted(async () => {
		const data1 = await ProductsListApi.getProductsListListAll()
		const data2 = await MerchantListApi.getMerchantListAll()
		productsList.value = data1
		merchantList.value = data2
	})

	/** 打开弹窗 */
	const open = async (type : string, id ?: number) => {
		dialogVisible.value = true
		dialogTitle.value = t('action.' + type)
		formType.value = type
		resetForm()
		// 修改时，设置数据
		if (id) {
			formLoading.value = true
			try {
				formData.value = await ProductsListApi.getProductsList(id)
			} finally {
				formLoading.value = false
			}
		}
	}
	defineExpose({ open }) // 提供 open 方法，用于打开弹窗

	/** 提交表单 */
	const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
	const submitForm = async () => {
		// 校验表单
		if (!formRef) return
		const valid = await formRef.value.validate()
		if (!valid) return
		// 提交请求
		formLoading.value = true
		try {
			const data = formData.value as unknown as ProductsListApi.ProductsListVO
			if (formType.value === 'create') {
				await ProductsListApi.createProductsList(data)
				message.success(t('common.createSuccess'))
			} else {
				await ProductsListApi.updateProductsList(data)
				message.success(t('common.updateSuccess'))
			}
			dialogVisible.value = false
			// 发送操作成功的事件
			emit('success')
		} finally {
			formLoading.value = false
		}
	}

	// 选择商家
	const handleChangeSelect = (value : any) => {
		merchantList.value.forEach((item) => {
			if (item.id === value) {
				formData.value.address = item.address
			}
		})
	}

	/** 重置表单 */
	const resetForm = () => {
		formData.value = {
			isWriteoff: 0,
			name: undefined,
			productType: undefined,
			merchantId: undefined,
			address: undefined,
			supplyPrice: undefined,
			platformPrice: undefined,
			productIntroduct: undefined,
			status: 1,
			cover: undefined,
		}
		formRef.value?.resetFields()
	}
</script>